<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<title>类别</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
	<style>
	body{font-size:16px;}
	.wrap{min-height:100%;width:100%;background-color:rgb(247,247,247);display:-webkit-flex;justify-content:flex-end;}
	.wrap-left{width:30%;min-height:100%;border-right:1px solid rgb(216,216,216);box-sizing:border-box;left:0;top:0;}
	.wrap-left li{padding:25px 10px 25px 15px;position:relative;}
	.wrap-left-ul-li-arrow{position:absolute;top:25px;right:-1px;height:20px;width:11px;background:url(images/arrowtoleft.png) center/100% no-repeat;}
	.wrap-right{width:70%;min-height:100%;background-color:rgb(239,239,239);}
	
	.wrap-right-ul{display:block;box-sizing:border-box;}
	.wrap-right-li{height:85px;border-bottom:1px solid rgb(222,222,222);padding:10px;display:-webkit-box;}
	
	.wrap-right-ul-img{height:65px;width:65px;}
	.wrap-right-ul-word{height:65px;line-height:65px;width:100%;display:-webkit-box;-webkit-box-flex:1;margin: 0 0 0 15px;}
	</style>
</head>
<body>
	<div class="wrap after">
		<div class="wrap-left">
			<ul class="wrap-left-ul " id="wrap-left-ul" style="border:1px solid red">
			     <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			      <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			       <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			        <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			         <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			          <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			           <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			            <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			             <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			              <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			               <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                    <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			                 <li class="wrap-left-ul-li" onclick="current_item(0)">父类<i class=""></i></li>
			</ul>
		</div>
		<div class="wrap-right" id="wrap-right">
 			<ul class="wrap-right-ul after" id="wrap-right-ul">
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
				
			</ul>
     	</div>
	</div>



	   

	
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/jquery.lazyload.min.js"></script>
	
	
	<script>
	var ii=0;
	var previous_item_symbol=0;
	var current_item_symbol=0;
	var current_item = function(symbol){
	
		document.getElementsByClassName('wrap-left-ul-li')[previous_item_symbol].getElementsByTagName("i")[0].className="";
		document.getElementsByClassName('wrap-left-ul-li')[previous_item_symbol].style.color="rgb(0,0,0)";
		document.getElementsByClassName('wrap-right-ul')[previous_item_symbol].style.display="none";

		document.getElementsByClassName('wrap-left-ul-li')[symbol].getElementsByTagName("i")[0].className="wrap-left-ul-li-arrow";
		document.getElementsByClassName('wrap-left-ul-li')[symbol].style.color="rgb(176,0,0)";
		document.getElementsByClassName('wrap-right-ul')[symbol].style.display="block";
		previous_item_symbol=symbol;
	}


		
//		apiready=function(){
//		        do_ajax('/app/getcategory','get',{},function(ret,err){
//     
//				       if(ret){
//				           
//				          // alert(JSON.stringify(ret));
//				          	var wrap_left_ul_template = document.getElementById('wrap-left-ul-template').innerHTML;
//							document.getElementById('wrap-left-ul').innerHTML = doT.template(wrap_left_ul_template)(ret);
//							
//							var wrap_right_template = document.getElementById('wrap-right-template').innerHTML;
//							document.getElementById('wrap-right').innerHTML=doT.template(wrap_right_template)(ret);
//							current_item(current_item_symbol);
//							
//							$("img.lazy").lazyload({
//								effect:'slideDown'
//							});
//							api.hideProgress();
//					    
//				       }else{
//				            api.alert({
//					            msg:('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode)
//					        });
//					        api.hideProgress();
//				       }
//			   });
//		}
//		
		
	</script>
</body>
</html>